<template>
  <div class="home_anchor">
    <el-affix>
      <el-anchor type="underline" :container="home_Dom" ref="anchor_box">
        <el-anchor-link
            v-for="(item, index) in anchors"
            :key="index"
            :href="`#${item.id}`"
            @click.prevent="scrollToElement(item.id)"
        >
          {{ item.label }}
        </el-anchor-link>
      </el-anchor>
    </el-affix>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, defineProps, ref, toRefs, nextTick} from 'vue';
import 'element-plus/dist/index.css';
import { ElAffix, ElAnchor, ElAnchorLink } from 'element-plus';

const props = defineProps({
  home_Dom: Object
});
const { home_Dom } = toRefs(props);

const anchors = ref([
  { id: 'slideBlock', label: '轮播图', selectId: 's1' },
  { id: 'homeSpecialSubject', label: '专题', selectId: 's2' },
  { id: 'maybeLike', label: '猜你喜欢', selectId: 's3' },
  { id: 'totalPro', label: '全部商品', selectId: 's4'}
]);

const anchor_box = ref(null)

const scrollToElement = (id) => {
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth'
    });
  }
};

onMounted(() => {
  jump_block('slideBlock')
});

const jump_block = (str) => {
  nextTick(() => {
    const element = anchor_box.value
    if (element) {
      element.scrollTo('#' + str);
    }
  });
}

onUnmounted(() => {

});


</script>

<style scoped>
.home_anchor{
  position: fixed;
  top: 10vh;
  right: 0;
  height: 92vh;
  width: 25vh;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
